<template>
  <div class="clearfix">
    <div>
      <label>题目: </label>
      <span>
        {{questionData.quName}}
      </span>
    </div>
    <div class="pull-left width618">
      <div>
        <label>题目编号: </label>
        <span>
          {{questionData.item}}
        </span>
      </div>
      <div>
        <label>描述: </label>
        <span>
          {{questionData.quNote}}
        </span>
      </div>
      <div>
        <label>状态:</label>
        <span>
            {{ (questionData.disabled ? '禁用' : '可用') }}
        </span>
      </div>
      <div>
        <div class="clearfix" v-for="(item, key) in questionData.quRadios">
          <div class="pull-left width70">
           <label>选项{{key + 1}}: </label> <span>{{item.optionName}}</span>
          </div>
          <div class="pull-left width30">
            <label>分值: </label> <span>{{item.optionScore}}</span>
          </div>
        </div>
        <div v-if="questionData.otherOptions">
          <div v-for="other in JSON.parse(questionData.otherOptions)">
            <div>
              <label> 问题补充：{{ other.question }} </label>
            </div>
            <div v-if="other.inputType === 'text' || other.inputType === 'textarea'">
            </div>
            <div v-else>
              <div v-for="otherSon in other.answer">
                <label>
                  <input :type="other.inputType" :value="otherSon"/>
                  <span>{{ otherSon }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pull-right width382 textCenter" v-if="questionData.file">
      <div><label>插图: </label></div>
      <span>
        <img id="previewImg" :src="questionData.file" style="width:100%;" class="img-thumbnail"/>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'previewQuestion',
  data () {
    return {
    }
  },
  props: {
    questionData: {
      type: Object,
      default: {}
    }
  },
  methods: {
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
